﻿<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>管道展示</span>
                </h3>
                <span class="m-section__sub">
                    管道展示的文本头信息
                </span>
            </div>
            <div class="col-xs-6 text-right">
                <!-- <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button> -->
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            <span class="m-badge m-badge--success"></span
                            >自动执行
                            <i
                                class="fa fa-exclamation-triangle m--font-warning"
                                style="margin-left:10px; font-size: 20px;"
                            ></i
                            >触发异常
                            <i
                                class="fa fa-exclamation-triangle m--font-info"
                                style="margin-left:10px; font-size: 20px;"
                            ></i
                            >新插入
                            <span
                                style="display: inline-block; border: 2px solid #34bfa3; padding: 2px 5px; font-size: 16px; margin: 2px 40px 2px 10px;"
                                >当前节点
                            </span>
                            <!-- <a href="javascript:;" [routerLink]="['../ganttchar']" [queryParams] = "{type: 1}">甘特图</a> -->
                            <!-- <span class="flag-item m--bg-gy">工艺类 </span>
              <span class="flag-item m--bg-zl">质量类 </span>
              <span class="flag-item m--bg-cb">成本类 </span>
              <span class="flag-item m--bg-yl">原材料类 </span>
              <span class="flag-item m--bg-rw">任务类 </span>
              <span class="flag-item m--bg-gxzx">工序执行类 </span>
              <span class="flag-item m--bg-rwzx">任务执行类 </span> -->
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <ul
                        class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
                        role="tablist"
                    >
                        <li class="nav-item m-tabs__item">
                            <div
                                class="btn-group m-btn-group"
                                role="group"
                                aria-label="..."
                            >
                                <button
                                    type="button"
                                    class="btn btn-secondary m-btn--hover-brand {{
                                        className1
                                    }}"
                                    (click)="tabTypeClick(1)"
                                >
                                    进行
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-secondary m-btn--hover-brand {{
                                        className2
                                    }}"
                                    (click)="tabTypeClick(2)"
                                >
                                    完成
                                </button>
                                <!-- <button type="button" class="btn btn-secondary m-btn--hover-brand {{className3}}" (click)="tabTypeClick(3)">
                  全部
                </button> -->
                            </div>
                        </li>
                        <li
                            class="nav-item m-tabs__item"
                            style="width: 300px; margin-left: 40px;"
                        >
                            <a
                                href="javascript:;"
                                class="m-portlet__nav-link m-btn--pill"
                            >
                                <div class="m-input-icon m-input-icon--right">
                                    <input
                                        type="text"
                                        [(ngModel)]="filterText"
                                        (keyup.enter)="getPipes($event)"
                                        class="form-control m-input m-input--solid"
                                        placeholder="Search..."
                                    />
                                    <span
                                        class="m-input-icon__icon m-input-icon__icon--right"
                                    >
                                        <span>
                                            <i
                                                class="la la-search m--font-brand"
                                                (click)="getPipes($event)"
                                            ></i>
                                        </span>
                                    </span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="m-portlet__body">
                <div class="row align-items-center" style="margin: 0;">
                    <div class="tab-content" style="width:100%;">
                        <div class="tab-pane active">
                            <div
                                class="primeng-datatable-container"
                                [busyIf]="primengTableHelper.isLoading"
                            >
                                <div class="m-flex">
                                    <div class="table-responsive">
                                        <div>
                                            <div *ngFor="let pipe of pipes">
                                                <flex-item
                                                    [pipe]="pipe"
                                                ></flex-item>
                                            </div>
                                        </div>
                                        <div class="primeng-paging-container">
                                            <p-paginator
                                                [rows]="5"
                                                #paginator
                                                (onPageChange)="
                                                    getPipes($event)
                                                "
                                                [totalRecords]="
                                                    primengTableHelper.totalRecordsCount
                                                "

                                            >
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{
                                                    '总计:' +
                                                        primengTableHelper.totalRecordsCount
                                                }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
